<!--
 * @Author: 黄达全
 * @Date: 2024-07-29 17:13:01
 * @LastEditTime: 2024-07-29 17:13:07
-->
<script lang="ts" setup>
import type { LevelAddForm, LevelSelectVO } from "@/common/type"
import LevelApi from "@/api/model/level"
import drawer from "@/components/drawer.vue"
import { useTable } from "@/hooks/useTable"
import useElementPlus from "@/hooks/useElementPlus"

const { message } = useElementPlus()

const {
    height,
    getData,
    pageSize,
    total,
    tableData,
    drawerRef,
    initForm,
    del,
    handleSelectionChange,
    editId,
    isAddMode,
    submitHandle,
    tableRef,
    tableHeight,
    formRules,
    getDataByPage
} = useTable<LevelSelectVO, LevelAddForm>({
    fetchData: (page, pageSize) => LevelApi.page(page, pageSize),
    addItem: (form) => LevelApi.add(form),
    deleteItem: (ids) => LevelApi.delete(ids),
    updateItem: (form) => LevelApi.update(form),
    initForm: {
        name: "",
        level: 1,
        discount: 100,
        status: 0,
        maxPrice: 0,
        maxTimes: 0
    },
    formRules: {
        name: [
            { required: true, message: "请输入等级名称", trigger: "blur" }
        ],
        level: [
            { required: true, message: "请输入等级", trigger: "blur" }
        ],
        discount: [
            { required: true, message: "请输入折扣", trigger: "blur" }
        ],
        maxPrice: [
            { required: true, message: "请输入最大消费金额", trigger: "blur" }
        ],
        maxTimes: [
            { required: true, message: "请输入最大消费次数", trigger: "blur" }
        ]
    },
    title: "会员等级"
})

// 打开新增抽屉
const openAddDrawer = () => {
    isAddMode.value = true
    initForm.name = ''
    initForm.level = 1
    initForm.discount = 100
    initForm.status = 0
    initForm.maxPrice = 0
    initForm.maxTimes = 0
    drawerRef.value.open()
}

// 打开编辑抽屉
const openEditLevelDrawer = (level: LevelSelectVO) => {
    isAddMode.value = false
    initForm.name = level.name
    initForm.level = level.level
    initForm.discount = level.discount
    initForm.status = level.status
    initForm.maxPrice = level.maxPrice
    initForm.maxTimes = level.maxTimes
    editId.value = level.id
    drawerRef.value.open()
}

const changeStatusHandle = async (e: number, row: LevelSelectVO) => {
    const { code } = await LevelApi.update({
        id: row.id,
        status: e,
        name: row.name,
        level: row.level,
        discount: row.discount,
        maxPrice: row.maxPrice,
        maxTimes: row.maxTimes
    })
    if (code == 1) {
        message({
            message: "修改状态成功",
            type: "success"
        })
        getData()
    } else {
        message({
            message: "修改状态失败",
            type: "error"
        })
    }
}
</script>

<template>
    <div class="levelPage">
        <el-card class="card" :body-style="{ height: height + 'px', padding: '10px 10px 0 10px' }">
            <template #header>
                <div class="card-header">
                    <el-button color="var(--primary-theme-color)" icon="el-icon-plus" size="small" type="primary"
                        @click="openAddDrawer">新增等级</el-button>
                    <el-button size="small" type="danger" @click="del" icon="el-icon-delete">批量删除</el-button>
                </div>
            </template>
            <div class="card-body">
                <div class="level-table" ref="tableRef">
                    <el-table :data="tableData" style="width:99.5%" stripe @selection-change="handleSelectionChange"
                        :height="tableHeight">
                        <el-table-column type="selection" width="80" align="center" />
                        <el-table-column fixed prop="name" label="等级名称" width="150" align="center" />
                        <el-table-column prop="level" label="等级" width="100" align="center" />
                        <el-table-column prop="discount" label="折扣" width="100" align="center">
                            <template #default="{ row }">
                                {{ row.discount }}%
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="120" align="center">
                            <template #default="{ row }">
                                <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                                    style="--el-switch-on-color: var(--primary-theme-color); --el-switch-off-color: #ccc"
                                    @change="changeStatusHandle($event, row)" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="maxPrice" label="最大消费金额" width="120" align="center">
                            <template #default="{ row }">
                                {{ row.maxPrice }}元
                            </template>
                        </el-table-column>
                        <el-table-column prop="maxTimes" label="最大消费次数" width="120" align="center">
                            <template #default="{ row }">
                                {{ row.maxTimes }}次
                            </template>
                        </el-table-column>
                        <el-table-column prop="createManagerName" label="创建者" width="140" align="center" />
                        <el-table-column prop="lastUpdateManagerName" label="更新者" width="140" align="center" />
                        <el-table-column prop="createTime" label="创建时间" width="170" align="center" />
                        <el-table-column prop="updateTime" label="更新时间" width="170" align="center" />

                        <el-table-column fixed="right" label="操作" align="center" width="200">
                            <template #default="{ row }">
                                <el-button type="warning" size="small" @click="openEditLevelDrawer(row)"
                                    icon="el-icon-edit">编辑</el-button>
                                <el-button type="danger" size="small" @click="del(row.id)"
                                    icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination">
                    <el-pagination size="small" background layout="prev, pager, next" :total="total"
                        :page-size="pageSize" @current-change="getDataByPage" />
                </div>
            </div>
        </el-card>
        <drawer ref="drawerRef" :title="isAddMode ? '新增等级' : '修改等级'" direction="rtl" size="35%" @submit="submitHandle">
            <template #rtl>
                <el-form :model="initForm" :rules="formRules" :label-width="100">
                    <el-form-item label="等级名称" prop="name" required>
    <el-input v-model="initForm.name" placeholder="等级名称"></el-input>
  </el-form-item>
  <el-form-item label="等级权重" prop="level">
    <el-input-number v-model="initForm.level" :min="1"></el-input-number>
  </el-form-item>
  <el-form-item label="状态">
    <el-switch v-model="initForm.status" :active-value="1" :inactive-value="0"  style="--el-switch-on-color: var(--primary-theme-color); --el-switch-off-color: #ccc"/>
  </el-form-item>
  <el-form-item label="升级条件">
    <div style="display: flex; align-items: center;">
      <span>累计消费满</span>
      <el-input-number v-model="initForm.maxPrice" :min="0" style="margin: 0 8px;"></el-input-number>
      <span>元</span>
    </div>
    <div style="color: #aaa; font-size: 12px;">设置会员等级所需的累计消费必须大于等于0，单位：元</div>
    <div style="display: flex; align-items: center; margin-top: 8px;">
      <span>累计次数满</span>
      <el-input-number v-model="initForm.maxTimes" :min="0" style="margin: 0 8px;"></el-input-number>
      <span>笔</span>
    </div>
    <div style="color: #aaa; font-size: 12px;">设置会员等级所需的购买量必须大于等于0，单位：笔</div>
  </el-form-item>
  <el-form-item label="折扣率(%)" prop="discount">
    <el-input-number v-model="initForm.discount" :min="0" :max="100"></el-input-number>
    <span style="margin-left: 8px;">%</span>
    <div style="color: #aaa; font-size: 12px;">折扣率单位为百分比，如输入90，表示该会员等级的用户可以以商品原价的90%购买</div>
  </el-form-item>
                </el-form>
            </template>
        </drawer>
    </div>
</template>

<style lang="scss" scoped>
.levelPage {
    height: 100%;

    .card-body {
        height: 100%;
        display: flex;
        flex-direction: column;

        .level-table {
            flex: 1;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                width: 0;
            }
        }

        .pagination {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: var(--primary-theme-color) !important;
    color: #FFFFFF;
}
</style>
